<template>
  <div class="hot_article">
    <p class="border-bottom"><i class="iconfont">&#xe625;</i>网站概况</p>
    <ul>
      <li><i class="iconfont">&#xe603;</i>文章总数：{{articleCount[0]}} 篇</li>
      <li><i class="iconfont">&#xe61b;</i>评论数量：{{speakCount[0]}} 条</li>
      <li><i class="iconfont">&#xe693;</i>浏览总量：{{browseCount[0]}} 次</li>
      <li><i class="iconfont">&#xe6d0;</i>用户数量：{{userCount[0]}} 个</li>
    </ul>
  </div>
</template>

<script>
import { getOverView } from 'com/shuju'
export default {
  name: 'HomeOverview',
  data () {
    return {
      articleCount: [0],
      speakCount: [0],
      browseCount: [0],
      userCount: [0]
    }
  },
  created () {
    getOverView(this.articleCount, this.speakCount,
      this.browseCount, this.userCount)
  }
}
</script>

<style lang="stylus" scoped>
  .hot_article{
    position: relative
    margin-top: .4rem
    margin-right: .05rem
    width: 340px
    height: 295px
    background-color: #ffffff
    float: right
    border: 1px solid white
    box-shadow: 0 0 1.5px rgb(220,220,220)
    p{
      padding-top: .2rem
      padding-left: .2rem
      padding-bottom: .2rem
      margin: 0
      text-align: left
      font-size: .55rem
      font-family: '宋体'
      color: rgb(60,141,188)
      font-weight: bolder
      .iconfont{
        vertical-align: top
        display: inline-block
        margin-top: 0
        padding-right: .3rem
        font-size: .5rem
        color: rgb(60,141,188)
      }
    }
    ul{
      list-style: none
      padding: 0
      margin: 0
      width: 100%
      height: 100%
      li{
        padding-left: .4rem
        margin-top: .45rem
        width: 100%
        height: 30px
        color:#555
        font-size: .4rem
        i{
          vertical-align: middle
          font-size: .5rem
          padding-right: .1rem
        }
      }
    }
  }
</style>
